/**
 * Created by asus on 2016/11/23.
 */
import React, { Component} from 'react';
import DatePicker from 'react-mobile-datepicker';

export default class Time extends Component {


    constructor(props) {
        super(props);
        this.state = {
            time1: new Date(),
            time2: new Date(),
            isOpen1: false,
            isOpen2: false,
            min1:new Date(2010,1,1),
            min2:new Date(2010,1,1),
            max1:new Date(2050,1,1),
            max2:new Date(2050,1,1)
        }
    }

    convertDate(date, formate) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();

        return formate
            .replace(/Y+/, year)
            .replace(/M+/, month)
            .replace(/D+/, day)
            .replace(/h+/, hour)
            .replace(/m+/, minute)
            .replace(/s+/, second);
    }

    render(){
        const {time1,time2,isOpen1,isOpen2,min1,min2,max1,max2} = this.state;
        return(
            <div className="flex-1 di flex">
                <div className="flex-1 di">
                   <span className="select-time di width20" style={{padding:'0.5rem 0.2rem'}}>
                       开始
                   </span>
                    <span className="select-time di width70"
                          style={{border:'1px solid #e5e5e5',padding:'0.5rem 0.2rem'}}
                          onClick={() => this.setState({ isOpen1: true }) }>
                           {this.convertDate(time1, 'YYYY-MM-DD')}
                       </span>
                    <DatePicker
                        value={time1}
                        min = {min1}
                        max = {max1}
                        isOpen={isOpen1}
                        onSelect={(time) => {this.setState({ time1:time, isOpen1: false ,min2:time,time2:time})}}
                        onCancel={() => this.setState({ isOpen1: false }) } />
                </div>
                <div className="flex-1 di">
                    <span className="select-time di width20" style={{padding:'0.5rem 0.2rem'}}>
                        结束
                    </span>
                    <span className="select-time di width70"
                          style={{border:'1px solid #e5e5e5',padding:'0.5rem 0.2rem'}}
                          onClick={() => this.setState({ isOpen2: true }) }>
                          {this.convertDate(time2, 'YYYY-MM-DD')}
                    </span>
                    <DatePicker
                        value={time2}
                        min = {min2}
                        max = {max2}
                        isOpen={isOpen2}
                        onSelect={(time) => {this.setState({ time2:time, isOpen2: false ,max1:time})}}
                        onCancel={() => this.setState({ isOpen2: false }) } />
                </div>
            </div>
        )
    }
}